<template>
    <div class="msg">
        <list-top></list-top>
        <div class="msgMain">
          <div class="headTitle"><span class="active">消息列表</span></div>
            <div class="msgMainBox clear">
                <div class="sideBar">
                    <li class="active">全部消息</li>
                    <li>系统消息</li>
                    <li>客服消息</li>
                    <li>订单消息</li>
                </div>
                <div class="msgContent">
                    <div class="noData" v-show="noData">
                        <i class="iconfont icon-gantanhaozhong n-icon"></i>
                        <div class="n-text">没有消息提醒</div>
                    </div>
                    <ul class="msgItemBox">
                        <router-link to="/" v-for="(omsg,index) in msgList" :key="index">
                            <div class="m-title">{{omsg.title}}</div>
                            <div class="m-desc">{{omsg.desc}}</div>
                            <div class="m-time">{{omsg.time}}</div>
                            <i class="iconfont icon-jiantou"></i>
                        </router-link>
                    </ul>
                </div>
            </div>
            <div class="pageBotom">
                <div class="pageBotomRight">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import listTop from "./public/listTop";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                msgList: [{
                        title: "你的代理又进一笔收入,看看他们都在卖什么？",
                        desc: "您的代理居然赚怎么多，快来向他学习！",
                        time: "2018-04-02 12：20"
                    },
                    {
                        title: "你的代理又进一笔收入,看看他们都在卖什么？",
                        desc: "您的代理居然赚怎么多，快来向他学习！",
                        time: "2018-04-02 12：20"
                    }
                ],
                noData: true,
            }
        }
    }
</script>
<style lang="less">
    @import "./css/msg.less";
</style>
